import { Link, useLocation, useNavigate, useSearchParams } from "react-router-dom";

export default function UseRouteHooks() {
    const navigate = useNavigate();
    const location = useLocation();
    const [searchParams,] = useSearchParams();

    function getLocation() {
        console.log("location", location);
    }

    function goRoute(params: string) {
        navigate(params, { state: { key: "value" } });
    }

    function getParams() {
        const id = searchParams.get("id");
        const name = searchParams.get("name");
        console.log("id", id);
        console.log("name", name);
        const resParams = {
            id,
            name,
        };
        console.log("queryParam", searchParams, resParams);
    }

    return (
        <div>
            <button className="returnButton">
                <a href="/">点击返回主菜单</a>
            </button>
            <h2>返回当前location对象</h2>
            <button onClick={getLocation}>点击获取location对象</button>
            <p>
                当前路由为 <b>{location.pathname}</b> , 当前路由参数为 <b>{JSON.stringify(location.state)}</b>
            </p>
            <h2>跳转路由</h2>
            <button onClick={() => goRoute("/UseRouteHooksParams?id=85&name=zhang_san")}>跳转其他路由</button>
            <button onClick={() => navigate(-1)}>返回上一级路由</button>
            <button onClick={() => navigate(1)}>去下一级路由</button>
            <Link to={"/UseRouteHooksParams?id=85&name=zhang_san"} style={{ marginLeft: "20px" }}>
                进行路由跳转
            </Link>
            <h2>获取参数</h2>
            <button onClick={getParams}>打印参数</button>
        </div>
    );
}
